@import "variable";

.App {
  height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  color: $color-font;
  font-size: 14px;

  .app-button {
    -webkit-app-region: no-drag;
    position: absolute;
    right: 10px;
    z-index: 100;

    .icon {
      cursor: pointer;
      margin: 10px 7px;

      &:hover {
        color: #fff;
      }
    }
  }

  .drag-area {
    position: absolute;
    height: 40px;
    width: 100vw;
    -webkit-app-region: drag;
  }

  .the-sidebar-wrapper {
    overflow: auto;
    min-width: 225px;
    max-width: 225px;
  }

  .main-wrapper {
    overflow: hidden;
    height: 100vh;
    box-sizing: border-box;
    padding-top: 40px;
    @include main-wrapper-mixin;
    background: url("./assets/images/global.png") no-repeat;
  }
}

.up-enter {
  @include main-wrapper-mixin;
  top: 100vh;
  opacity: 0;
}

.up-enter-active {
  @include main-wrapper-mixin;
  top: 0;
  opacity: 1;
  transition: top 0.16s, opacity 0.16s ease-in-out;
}

.up-exit {
  @include main-wrapper-mixin;
  top: 0;
  opacity: 1;
}

.up-exit-active {
  @include main-wrapper-mixin;
  top: -100vh;
  opacity: 0;
  transition: top 0.16s, opacity 0.16s ease-in-out;
}

.down-enter {
  @include main-wrapper-mixin;
  top: -100vh;
  opacity: 0;
}

.down-enter-active {
  @include main-wrapper-mixin;
  top: 0;
  opacity: 1;
  transition: top 0.16s, opacity 0.16s ease-in-out;
}

.down-exit {
  @include main-wrapper-mixin;
  top: 0;
  opacity: 1;
}

.down-exit-active {
  @include main-wrapper-mixin;
  top: 100vh;
  opacity: 0;
  transition: top 0.16s, opacity 0.16s ease-in-out;
}
